<template>
  <view class="bg-color" :style="{paddingTop:getFillHeight()+'px'}">
    <!-- 使用自定义头部导航条 -->
    <my-navbar title='推荐'></my-navbar>
    <!-- 轮播图区域 -->
    <view class="swiper-box">
      <swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500"
        indicator-active-color="red" circular>
        <swiper-item v-for="item in swiperList" :key="item._id" class="swiper-list">
          <navigator class="swiper-item"
            :url="item.target==='self'?'/subpkg/papers_list/papers_list?'+item.url:item.url"
            :target="item.target==='self'?'self':'miniProgram'" :app-id="item.target === 'self'?'':item.appid">
            <image class="img" :src="item.picurl" mode=""></image>
          </navigator>
        </swiper-item>
      </swiper>
    </view>
    <!-- 公告区域 -->
    <view class="notice-box">
      <swiper class="notice-swiper" autoplay :interval="2000" :duration="500" vertical>
        <swiper-item v-for="not in noticeList" :key="not._id">
          <view class="swiper-item" @click="goNotDetail(not._id)">
            <view class="n-item">
              <view class="name-sound-box">
                <uni-icons type="sound-filled" size="22"></uni-icons>
                <view class="name">公告</view>
              </view>

              <view class="tilte">
                {{not.title}}
              </view>
              <uni-icons type="arrowright"></uni-icons>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>
    <!-- 每日推荐 -->
    <my-column col-name="每日推荐">
      <template #h-right>
        <view class="day">
          <uni-icons style="margin-right: 5px;" type="calendar" size="22"></uni-icons>
          <uni-dateformat format="yyyy年MM月dd日" :date="Date.now()"></uni-dateformat>
        </view>
      </template>

      <template #body>
        <view class="random-pl">
          <scroll-view scroll-x class="scroll-x">
            <image @click="handlerPreview(img._id)" class="paper-item" :src="img.smallPicurl"
              v-for="(img,index) in papaerRandomList" :key="img._id" mode="aspectFill">
            </image>
          </scroll-view>
        </view>
      </template>
    </my-column>
    <!-- 专题精选区域 -->
    <my-column col-name="专题精选">
      <template #h-right>
        <view @click="handlerMore" class="text-second">More+</view>
      </template>
      <template #body>
        <view class="careful-choice-list">
          <!-- 使用自定义的卡片组件 -->
          <my-card-cate v-for="(item,index) in recommendedCateList" :key="item._id" :item="item"></my-card-cate>
          <my-card-cate is-more></my-card-cate>
        </view>
      </template>
    </my-column>
  </view>
</template>

<script setup>
  import {
    computed,
    ref
  } from 'vue';
  import {
    getFillHeight,
  } from '@/utlis/system-info.js'
  import {
    onLoad,
    onShareAppMessage,
    onShow,
    onUnload,
    onShareTimeline,
  } from '@dcloudio/uni-app'
  import http from '@/api/index.js'
  import {
    showMsg
  } from '../../utlis/interact';
  // 响应式数据
  const swiperList = ref([]);
  const noticeList = ref([]);
  const papaerRandomList = ref([]);
  // 推荐分类
  const recommendedCateList = ref([]);

  //全局变量
  // 组件实例

  //计算属性

  //事件回调组
  //点击公告
  function goNotDetail(id) {
    uni.navigateTo({
      url: '/subpkg/notices_detail/notices_detail?id=' + id
    })
  }
  //每日推荐点击预览
  function handlerPreview(id) {
    uni.navigateTo({
      url: '/subpkg/preview_img/preview_img?id=' + id
    })
  }
  // 点击了more
  function handlerMore() {
    uni.switchTab({
      url:'/pages/cate/cate'
    })
  }
  //网络请求
  // 获取轮播图数据
  async function getBannerList() {
    const res = await http('api/bizhi/homeBanner');
    if (res.errCode !== 0) return showMsg();

    swiperList.value = res.data;
  }
  // 获取公告列表
  async function getNoticeList() {
    const res = await http('api/bizhi/wallNewsList', {
      select: true
    })

    if (res.errCode !== 0) return showMsg();

    noticeList.value = res.data;
  }
  //随机9张壁纸
  async function getRandomPaper() {
    const res = await http('api/bizhi/randomWall');

    if (res.errCode !== 0) return showMsg();

    papaerRandomList.value = res.data;
    uni.setStorageSync('paperlist', JSON.stringify(papaerRandomList.value));
  }
  // 获取壁纸分类列表
  async function getRecommendedCateList() {

    const res = await http('api/bizhi/classify', {
      select: true
    });

    if (res.errCode !== 0) return showMsg();
    const cateList = [];

    if (recommendedCateList.value.length !== 0) {
      const oldArr = recommendedCateList.value.map(x => x._id);
      res.data.forEach(c => {
        if (!oldArr.includes(c._id)) cateList.push(c);
      })
      recommendedCateList.value = [...recommendedCateList.value, ...cateList]
    } else {
      recommendedCateList.value = res.data;
    }
  }

  //生命周期
  onLoad(() => {
    getBannerList();
    getNoticeList();
    getRecommendedCateList();
  });

  // 页面被展示了
  onShow(() => {
    getRandomPaper();
  });

  // 分享好友功能
  onShareAppMessage(() => {
    return {
      title: '视享',
      path: '/pages/home/home'
    }
  });
  // 转发朋友圈功能
  onShareTimeline(() => {
    return {
      title: '精选壁纸',
      imageUrl: '/static/avatar.jpeg'
    }
  })
</script>

<style lang="scss" scoped>
  //轮播图区域
  .swiper-box {
    width: 750rpx;
    padding: 20rpx 0;

    .swiper {
      height: 345rpx;

      .swiper-list {
        .swiper-item {
          width: 100%;
          height: 100%;
          padding: 0 30rpx;
          box-sizing: border-box;

          .img {
            width: 100%;
            height: 100%;
            border-radius: 10px;
          }
        }
      }

    }

  }

  // 公告区域
  .notice-box {
    .notice-swiper {
      height: 76rpx;
      padding: 10rpx 30rpx;

      .swiper-item {
        width: 100%;
        height: 100%;
        background-color: #e4e4e4;
        border-radius: 20px;
        padding: 21rpx 26rpx;

        .n-item {
          display: flex;
          flex-wrap: nowrap;
          align-items: center;
          justify-content: space-between;

          .name-sound-box {
            display: flex;
            justify-content: space-between;
            align-items: center;

            :deep() {
              .uni-icons {
                color: $theme-color !important;
              }
            }

            .name {
              color: $theme-color;
              font-size: 26rpx;
              white-space: nowrap;
            }
          }

          .tilte {
            width: 431rpx;
            font-size: 26rpx;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin: 0 45rpx;
            text-align: left;
          }
        }


      }
    }

  }

  // 每日推荐
  // 头部右侧
  .day {
    display: flex;
    align-items: center;
    font-size: 26rpx;
    color: #000000;

    :deep() {
      .uni-icons {
        color: $theme-color !important;
      }
    }
  }

  // 壁纸列表区
  .random-pl {
    .scroll-x {
      width: 720rpx;
      height: 451rpx;
      white-space: nowrap;

      & .paper-item:last-child {
        margin-right: 30rpx;
      }


      .paper-item {
        width: 201rpx;
        height: 100%;
        margin-right: 15rpx;
        border-radius: 10px;
      }
    }
  }

  .text-second {
    color: $text-color-second;
  }

  //专题精选区域 
  .careful-choice-list {
    width: 695rpx;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 17rpx;
    box-sizing: content-box;
    position: relative;

  }
</style>